<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		*{
			margin: 0;
			padding: 0;
		}
			.box{
				background-image: url(jisuanqi.jpg);
				width: 690px;
				height: 1227px;
				margin: 0 auto;
				position: relative;
			}
			.box input:nth-child(1){
				position: absolute;
				top: 880px;
				width: 175px;
				height: 175px;
				opacity: 0;
			}
			.box input:nth-child(2){
				width: 680px;
				height: 120px;
				position: absolute;
				right: 0;
				top: 240px;
				background-color: rgba(0,0,0,0);
				border: none;
				font-size: 150px;
				color: white;
				text-align: right;
				outline: none;
			}
			.box input:nth-child(3){
				position: absolute;
				top: 365px;
				width: 175px;
				height: 175px;
				opacity: 0;
			}
			.box input:nth-child(4){
				position: absolute;
				top: 365px;
				width: 175px;
				height: 175px;
				opacity: 0;
				left: 175px;
			}
			.box input:nth-child(5){
				position: absolute;
				top: 365px;
				width: 175px;
				height: 175px;
				opacity: 0;
				left: 350px;
			}
			.box input:nth-child(6){
				position: absolute;
				top: 366px;
				width: 172px;
				height: 171px;
				left: 516px;
				background-color: red;
				border: none;
				opacity: 0;
			}
			.box input:nth-child(7){
				position: absolute;
				top: 538px;
				width: 172px;
				height: 172px;
				left: 516px;
				background-color: yellow;
				border: none;
				opacity: 0;
			}
			.box input:nth-child(8){
				position: absolute;
				top: 538px;
				width: 172px;
				height: 172px;
				left: 344px;
				background-color: yellow;
				border: none;
				opacity: 0;
			}
			.box input:nth-child(9){
				position: absolute;
				top: 538px;
				width: 172px;
				height: 172px;
				left: 172px;
				background-color: red;
				border: none;
				opacity: 0;
			}
			.box input:nth-child(10){
				position: absolute;
				top: 538px;
				width: 172px;
				height: 172px;
				left: 0px;
				background-color: red;
				border: none;
				opacity: 0;
			}
			.box input:nth-child(11){
				position: absolute;
				top: 710px;
				width: 172px;
				height: 172px;
				left: 0px;
				background-color: red;
				border: none;
				opacity: 0;
			}
			.box input:nth-child(12){
				position: absolute;
				top: 710px;
				width: 172px;
				height: 172px;
				left: 172px;
				background-color: red;
				border: none;
				opacity: 0;
			}
			.box input:nth-child(13){
				position: absolute;
				top: 710px;
				width: 172px;
				height: 172px;
				left: 344px;
				background-color: red;
				border: none;
				opacity: 0;
			}
			.box input:nth-child(14){
				position: absolute;
				top: 710px;
				width: 172px;
				height: 172px;
				left: 516px;
				background-color: red;
				border: none;
				opacity: 0;
			}
			.box input:nth-child(15){
				position: absolute;
				top: 882px;
				width: 172px;
				height: 172px;
				left: 516px;
				background-color: red;
				border: none;
				opacity: 0;
			}
			.box input:nth-child(16){
				position: absolute;
				top: 882px;
				width: 172px;
				height: 172px;
				left: 344px;
				background-color: red;
				border: none;
				opacity: 0;
			}
			.box input:nth-child(17){
				position: absolute;
				top: 882px;
				width: 172px;
				height: 172px;
				left: 172px;
				background-color: red;
				border: none;
				opacity: 0;
			}
			.box input:nth-child(18){
				position: absolute;
				bottom: 0px;
				width: 172px;
				height: 172px;
				right: 0px;
				background-color: red;
				border: none;
				opacity: 0;
			}
			.box input:nth-child(19){
				position: absolute;
				bottom: 0px;
				width: 172px;
				height: 172px;
				right: 172px;
				background-color: red;
				border: none;
				opacity: 0;
			}
			.box input:nth-child(20){
				position: absolute;
				bottom: 0px;
				width: 172px;
				height: 172px;
				right: 344px;
				background-color: green;
				border: none;
				opacity: 0;
				width: 344px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<input type="button" onclick="one()"/>
			<input type="text"  id="num"/>
			<input type="button" onclick="AC()"/>
			<input type="button" onclick="fu()" />
			<input type="button" onclick="yu()" />
			<input type="button" onclick="chu()" />
			<input type="button" onclick="chen()" />
			<input type="button" onclick="nine()" />
			<input type="button" onclick="eight()" />
			<input type="button" onclick="seven()" />
			<input type="button" onclick="four()" />
			<input type="button" onclick="five()" />
			<input type="button" onclick="six()" />
			<input type="button" onclick="jian()" />
			<input type="button" onclick="jia()" />
			<input type="button" onclick="three()" />
			<input type="button" onclick="two()" />
			<input type="button" onclick="he()" />
			<input type="button" onclick="dian()" />
			<input type="button" onclick="zero()" />
		</div>
		<script>
			var one = function(){
				num.value = num.value + "1";
			};
			var AC = function(){
				num.value = "";
			};
			var fu = function(){
				num.value = num.value*"-1";
			};
			var yu = function(){
				num.value = num.value + "%" ;
			};
			var chu = function(){
				num.value = num.value + "÷" ;
			};
			var chen = function(){
				num.value = num.value + "*" ;
			};
			var nine = function(){
				num.value = num.value + "9" ;
			};
			var eight = function(){
				num.value = num.value + "8" ;
			};
			var seven = function(){
				num.value = num.value + "7" ;
			};
			var four = function(){
				num.value = num.value + "4" ;
			};
			var five = function(){
				num.value = num.value + "5" ;
			};
			var six = function(){
				num.value = num.value + "6" ;
			};
			var jian = function(){
				num.value = num.value + "-" ;
			};
			var jia = function(){
				num.value = num.value + "+" ;
			};
			var three = function(){
				num.value = num.value + "3" ;
			};
			var two = function(){
				num.value = num.value + "2" ;
			};
			var he = function(){
				num.value = num.value + "=" ;
			};
			var dian = function(){
				num.value = num.value + "." ;
			};
			var zero = function(){
				num.value = num.value + "0" ;
			};
		</script>
	</body>
</html>
